---
import { Image } from "astro:assets";
import { Icon } from "astro-icon/components";
import astronautImage from "~/assets/astronaut.png";
import HeroImage from "~/components/hero-image.astro";
import Starfield from "~/components/starfield.astro";
import GitHubCorner from "./github-corner.astro";

const widths = [450, 800];
const sizes = "(min-width: 640px) 42vw, 67vw";
---

<section class="relative h-full bg-black">
  <Starfield />
  <GitHubCorner />
  <div id="splash-bg-fallback" class="absolute inset-0 hidden opacity-40">
    <HeroImage />
  </div>
  <div class="relative grid h-full place-items-center sm:grid-cols-2">
    <h2
      class="flex flex-col items-center gap-2 self-end sm:gap-4 sm:self-auto sm:justify-self-end"
    >
      <Icon name="logomark" class="size-20 text-white md:size-32" />
      <div
        class="gradient-text text-center font-extrabold tracking-tighter text-6xl md:text-8xl"
      >
        程序员
        <br /> 枫竹
        <br /> 个人网站
      </div>
    </h2>
    <div
      id="astronaut"
      class="w-2/3 max-w-3xl self-start sm:w-10/12 sm:self-auto sm:justify-self-start"
    >
      <Image
        class="h-full w-full object-cover"
        src={astronautImage}
        widths={widths}
        sizes={sizes}
        loading="eager"
        alt="A floating astronaut in a space suit"
      />
    </div>
  </div>
</section>

<noscript>
  <style>
    #splash-bg-fallback {
      display: block;
    }
  </style>
</noscript>

<style>
  @keyframes float {
    0% {
      transform: translate3d(0, 0, 0);
    }

    100% {
      transform: translate3d(0, 30px, 0);
    }
  }

  #astronaut {
    animation: float linear 2.5s infinite alternate;
  }

  @media (prefers-reduced-motion: reduce) {
    #astronaut {
      @apply animate-none;
    }

    :global(#starfield) {
      @apply hidden;
    }

    #splash-bg-fallback {
      @apply block;
    }
  }
</style>
